import React, { useState } from "react";
import { connect } from 'dva';
import { history } from 'umi';
// import explain from '@assets/mainWindow/videoGame/icon_info.png';
import styles from './index.less';
import SummaryTable from './summaryTable/index';
import { Button, Modal, Popover, Progress } from "antd";

const Summary = (props) => {
  const onChange = (key) => {
    console.log(key);
  }
  const [openDiago, setOpenDiago] = useState(false)
  const testContent = (
    <div style={{ fontSize: '14px' }}>
      以性能中平均帧率和抖动率最差等级作为评估结论
    </div>
  );
  const rateContent = (
    <div style={{ fontSize: '14px' }}>
      本次测试满足游戏测评模型标准
      (S A B,当前标准只能考虑性能中平均帧率和抖动率)。
    </div>
  );
  const openDetailMessage = () => {
    setOpenDiago(true)
  }
  return (
    <div className={styles.reportContainer}>
      <div className={styles.result}>
        <div id={'result'} className={styles.result_title}>
          <div className={styles.title_line}></div>
          <div className={styles.title_write}>测试结论</div>
          <Popover
            getPopupContainer={() => document.getElementById('result')}
            content={testContent}
            placement="topRight"
            title="测试标准说明"
            trigger='hover'
          >
            <img className={styles.title_question} src="" alt="" />
          </Popover>
        </div>
        <div className={styles.result_general}>
          <div className={styles.general_progress}>
            <div id="general_progress" className={styles.progress_title}>
              <div className={styles.title}>综合评分</div>
              <Popover
                getPopupContainer={() => document.getElementById('result')}
                content={rateContent}
                placement="topRight"
                title="综合评分说明"
                trigger='hover'
              >
                <img className={styles.picture} src="" alt="" />
              </Popover>
            </div>

            <div className={styles.progress}>
              <Progress
                type="circle"
                percent={100}
                format={() => 'S'}
                strokeColor="#007dff"
              />
            </div>
          </div>

          <div className={styles.general_rate}>
            <div id='rate_title' className={styles.rate_title}>
              <span className={styles.title}>评分详情</span>
              <img onMouseMove={() => openDetailMessage()} className={styles.picture} src="" alt="" />
              <Modal
                title="测试评估模型"
                centered
                open={openDiago}
                footer={[]}
                width={580}
                height={555}
                onCancel={() => setOpenDiago(false)}
                getContainer={() => document.getElementById('rate_title')}
              >
                <SummaryTable />
                <p style={{ fontSize: '14px', marginTop: '20px', color: 'rgb(0,0,0,0.5)', marginBottom: '0' }}>备注:凡是没有达到A标，则评估结果为B</p>
              </Modal>
            </div>
            <div className={styles.rate_caption}>
              <span className={styles.caption_fixed}>
                {'归一化电流<1200mA'}
              </span>
              <span className={styles.caption_result}>{'最大壳温<46C'}</span>
            </div>
            <div className={styles.rate_standard}>
              <span className={styles.standard_fixed}>平均帧率</span>
              <Button className={styles.standard_button_first}
                type="primary"
                size="small"
              >
                S
              </Button>
              <Button className={styles.standard_button}
                type="primary"
                size="small"
              >
                A
              </Button>
              <Button className={styles.standard_button}
                type="primary"
                size="small"
              >
                B
              </Button>
            </div>
            <div className={styles.rate_standard}>
              <span className={styles.standard_fixed}>抖动率</span>
              <Button className={styles.standard_button_first}
                type="primary"
                size="small"
              >
                S
              </Button>
              <Button className={styles.standard_button}
                type="primary"
                size="small"
              >
                A
              </Button>
              <Button className={styles.standard_button}
                type="primary"
                size="small"
              >
                B
              </Button>
            </div>
            <div className={styles.rate_standard}>
              <span className={styles.standard_fixed}>最差丢帧率(观察)</span>
              <Button className={styles.standard_button_first}
                type="primary"
                size="small"
              >
                S
              </Button>
              <Button className={styles.standard_button}
                type="primary"
                size="small"
              >
                A
              </Button>
              <Button className={styles.standard_button}
                type="primary"
                size="small"
              >
                B
              </Button>
            </div>

            <div className={styles.rate_standard}>
              <span className={styles.standard_fixed}>卡帧数/小时(观察项)</span>
              <Button className={styles.standard_button_first}
                type="primary"
                size="small"
              >
                S
              </Button>
              <Button className={styles.standard_button}
                type="primary"
                size="small"
              >
                A
              </Button>
              <Button className={styles.standard_button}
                type="primary"
                size="small"
              >
                B
              </Button>
            </div>
          </div>
          <div className={styles.general_question}>
            <div className={styles.question_title}>
              <div className={styles.title}>问题概述</div>
            </div>
            <div className={styles.panel_container}>
              <p className={styles.text_title}>归一化电流请重点关注一下较高风险的问题：</p>
              <p className={styles.text_content}>无</p>
              <p className={styles.text_title}>归一化电流建议：</p>
              <p className={styles.text_content}>无</p>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.report}>
        <div className={styles.pageTitle}>报告详情</div>
        <div className={styles.performance}>
          <div className={styles.performance_title}>性能</div>
          <div className={styles.performance_content}>
            <div className={styles.content}>
              <div className={styles.content_heade}>平均帧率(FPS)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>抖动率(%)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>低帧率(%)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>最差丢帧(FPS)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>卡顿数/h</div>
              <div className={styles.content_number}>18(9/0/3)</div>
            </div>
          </div>
        </div>
        <div className={styles.performance}>
          <div className={styles.performance_title}>负载</div>
          <div className={styles.performance_content}>
            <div className={styles.content}>
              <div className={styles.content_heade}>CPU-C1频率(MHZ)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>CPU-C2频率(MHZ)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>CPU-C3频率(MHZ)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>GPU频率(MHZ)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>DDR频率(MHZ)</div>
              <div className={styles.content_number}>1236.99</div>
            </div>
          </div>
        </div>
        <div className={styles.performance}>
          <div className={styles.performance_title}>功耗</div>
          <div className={styles.performance_content}>
            <div className={styles.content}>
              <div className={styles.content_heade}>续航时间(h)</div>
              <div className={styles.content_number}>--</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>平均功耗(mW)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>归一化电流(mA)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>续航时间(h)</div>
              <div className={styles.content_number}>是</div>
            </div>
          </div>
        </div>
        <div className={styles.performance}>
          <div className={styles.performance_title}>热</div>
          <div className={styles.performance_content}>
            <div className={styles.content}>
              <div className={styles.content_heade}>初始壳温(C)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>最大壳温(C)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>壳温温升(C)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>前10分钟温升(C)</div>
              <div className={styles.content_number}>25.33</div>
            </div>
            <div className={styles.content}>
              <div className={styles.content_heade}>低温时长占比(%)</div>
              <div className={styles.content_number}>{'100(<43C)'}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default Summary;
// export default connect(({ staticKpiPage }) => ({ staticKpiPage }))(Summary);